<template>
  <table v-if="msg.length>0">
    <thead>
    <tr>
      <th v-for="item in Object.keys(msg[0])">{{ item }}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="persion,index in msg">
      <td>{{ persion.name }}</td>
      <td>{{ persion.age }}</td>
      <td>{{ persion.sex }}</td>
      <td :class="'text-center'"><button @click="deletePerson(index)">Delete</button></td>
    </tr>
    </tbody>
  </table>
</template>

<script>
  export default {
    props: {
        msg:{
          type:Array,
          default: []
        }
    },
    methods: {
      deletePerson: function(index){
        this.$emit('deletePerson',index);
      }
    }
  }
</script>
<style scoped>
  @import './css/quit-table.import.css';
</style>

